<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderList('未掌握知识点课后练习完成情况')">

</head>
<body>
<div id="content" class="col-lg-12 col-sm-12">
    <div class="row">
        <div class="box col-md-12" style="padding: 0;margin-top: 5px;">
            <div class="box-inner">
                <div class="box-header well" data-original-title="">
                    <h2>
                        <i class="glyphicon glyphicon-list"></i>未掌握知识点课后练习完成情况
                    </h2>
                    <div class="box-icon">
                        <a href="javascript:void(0);" id="smaller" class="btn btn-minimize btn-round btn-default"><i class="glyphicon glyphicon-chevron-up"></i></a>
                    </div>
                </div>
                <div class="box-content">
                    <form class="form-inline form-search " role="form" th:action="@{'/practice/questions/list'}">
                        <select class="selectpicker" name="listState" multiple th:title="请选择完成状态" data-actions-box="true" th:if="${listState!=null}">
                            <option value="0" th:selected="${#lists.contains(listState, 0)}">未做</option>
                            <option value="1" th:selected="${#lists.contains(listState, 1)}">未做完</option>
                            <option value="2" th:selected="${#lists.contains(listState, 2)}">已完成</option>
                        </select>
                        <select class="selectpicker" name="listState" multiple th:title="请选择状态" data-actions-box="true" th:if="${listState==null}">
                            <option value="0">未做</option>
                            <option value="1">未做完</option>
                            <option value="2">已完成</option>
                        </select>
                        <select class="selectpicker" name="listCcId" th:if="${session.roleId!=2}" multiple data-live-search="true" th:title="请选择CC" data-live-search-placeholder="搜索" data-actions-box="true">
                            <optgroup th:each="item:${cclist}" th:label="${item.name}">
                                <option th:each="oitem:${item.list}" th:value="${oitem.id}" th:selected="${oitem.selected}" th:text="${oitem.name}"></option>
                            </optgroup>
                        </select>
                        <select class="selectpicker" name="listSscId" th:if="${session.roleId!=2 && session.roleId!=12 && session.roleId!=8}" multiple data-live-search="true" th:title="请选择SSC" data-live-search-placeholder="搜索" data-actions-box="true">
                            <option th:each="item:${ssclist}" th:value="${item.id}" th:selected="${item.selected}" th:text="${item.loginName}"></option>
                        </select>
                        <div class="input-group">
                            <div class="input-group-addon">课程日期</div>
                            <input class="form-control" name="startTime" id="startTime" style="width:105px;" maxlength="10" placeholder="开始日期" th:value="${startTime}" th:title="入学日期开始日期" autocomplete="off" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'endTime\',{d:-1})||\'%y-%M-%d\'}',minDate:'2015-05-15'})">
                            <input class="form-control" name="endTime" id="endTime" style="width:105px;" maxlength="10" placeholder="结束日期" th:value="${endTime}" th:title="入学日期结束日期" autocomplete="off" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'startTime\',{d:1})||\'2015-05-15\'}',maxDate:'%y-%M-%d'})">
                        </div>
                        <div class="input-group">
                            <input type="search" name="searchKey" id="search" class="form-control" th:value="${searchKey}" onkeyup="if(event.keyCode==13){$('form').submit()}" placeholder="查询关键字..." style="width:200px;margin-bottom: 0 !important;">
                            <span class="input-group-btn">
                                <button class="btn btn-info" type="submit"> 查 询</button>
                            </span>
                        </div>
                    </form>
                    <br>
                    <table class="table table-striped table-bordered table-hover footable" data-show-toggle="false">
                        <thead>
                        <tr>
                            <th class="text-center">序号</th>
                            <th class="text-center">学员</th>
                            <th class="text-center">学员名称</th>
                            <th class="text-center">CC</th>
                            <th class="text-center">SSC</th>
                            <th class="text-center">课程时间</th>
                            <th class="text-center" data-breakpoints="xs">上课老师</th>
                            <th class="text-center" data-breakpoints="xs">上课教材</th>
                            <th class="text-center">状态</th>
                            <th class="text-center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="item,itemStat:${pageInfo.list}">
                            <td class="text-center" th:text="${itemStat.index+1}"> </td>
                            <td class="text-center">
                                <a href="javascript:" th:data-personid="${item.personId}" onclick="personInfo($(this).data('personid'))"><span th:text="${item.studentLogin}"> </span></a>
                                <p th:if="${item.ltId>0}">
                                    <img src="../../static/img/admin.png" alt="学管师" title="学管师">
                                </p>
                            </td>
                            <td class="text-center" th:text="${item.cnName}"> </td>
                            <td class="text-center" th:text="${item.ccLogin}"> </td>
                            <td class="text-center" th:text="${item.sscLogin}"> </td>
                            <td class="text-center" th:text="${#dates.format(item.releaseTime,'yyyy-MM-dd HH:mm')}"> </td>
                            <td class="text-center" th:text="${item.teacherLogin}"> </td>
                            <td class="text-center" th:text="${item.materialName}"> </td>
                            <td class="text-center" th:switch="${item.state}">
                                <span class="label-danger label" th:case="0">未做</span>
                                <span class="label-warning label" th:case="1">未做完</span>
                                <span class="label-success label" th:case="2">已完成</span>
                            </td>
                            <td>
                                <button th:if="${item.state>0}" class="btn btn-info btn-xs" th:onclick="|openWindow(this)|" th:data-url="@{'/practice/questions/result/view/'+${item.lessonId}}" style="margin-bottom:3px;"> <i class="glyphicon glyphicon-zoom-in icon-white"></i> 查看做题结果</button>
                            </td>
                        </tr>
                        </tbody>

                    </table>
                    <div th:include="include/pageinfo::pager"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustomList(~{::script})">
    <script src="../../static/chosen/chosen.jquery.min.js" th:src="@{https://hkres.etalk365.com/public/lib/bootstrap-select/2.0.0-beta1/js/bootstrap-select.min.js}"></script>
    <script src="https://hkres.etalk365.com/public/lib/bootstrap-select/2.0.0-beta1/js/i18n/defaults-zh_CN.min.js"></script>
    <script src="../../static/My97DatePicker/WdatePicker.js" th:src="@{/static/My97DatePicker/WdatePicker.js}"></script>
    <script>
        $(function() {
            $('.footable').footable();
        });

        //打开旧版页面的按钮
        function openWindow(obj) {
            let url=$(obj).data("url");
            layer.open({
                type: 2,
                title: false,
                closeBtn: 1, //显示关闭按钮
                shade: [0],
                area: ['80%', '80%'],
                //offset: 'rb', //右下角弹出
                // time: 2000, //2秒后自动关闭
                anim: 2,
                content: [url, 'yes'], //iframe的url，no代表不显示滚动条
                end: function () {
                    // location.reload(true);
                }
            });
        }

        /**
         * 学员基本信息卡片弹窗
         * @param personId  学员id
         */
        function personInfo(personId){
            if(personId==null || personId === ''){
                layer.msg("参数错误");
                return;
            }
            let url = '/student/info?personId='+personId;
            layer.open({
                id: 'insert-form',
                type: 2,
                title: "",
                closeBtn: 1, //显示关闭按钮
                shade: [0.5],
                area: ['98%', '99%'],
                // offset: 'rb', //右下角弹出
                // time: 2000, //2秒后自动关闭
                // maxmin: true, //开启最大化最小化按钮
                anim: 2,
                content: [url, 'no'], //iframe的url，no代表不显示滚动条
                end: function (index, layer) { //此处用于演示

                }
            });
        }
    </script>

</div>
</body>
</html>